<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./页面样式.css">
</head>
<body>
    <table style="border: 1px solid black;">
        <thead>
            <tr>
                <th colspan="6">确认订单</th>
            </tr>
            <tr>
                <td>序号</td>
                <td>商品信息</td>
                <td>单价</td>
                <td>数量</td>
                <td>小计</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody> 
            <!-- <tr>
                <td>1</td>
                <td><img src="./Snipaste_2025-01-27_18-54-48.png" style="width: 60px;height: 60px;"><p style="font-size: 11px;">共享品茶乐趣公道闻香手工吹制</p>
                <p style="font-size: 10px; color: #a6a6a6;">规格：公道杯230ml/手工吹制</p></td>
                <td>￥189.00</td>
                <td>10</td>
                <td>￥1890.00</td>
                <td><button style="border: 0; color: green;">删除</button></td>
            </tr> -->
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6">共 <font class="s1"></font>件商品，商品合计: <font style="color: red;" class="s2"></font></td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
<script>
    var tbody=document.querySelector('tbody')
    var s1=document.querySelector('.s1')
    var s2=document.querySelector('.s2')
    var b=1;
    var sum=0;
    var prices=0;
    var data=[
    {
        'tp':'./Snipaste_2025-01-27_18-54-48.png',
        'tag':'共享品茶乐趣公道闻香手工吹制',
        'gg':'规格：公道杯230ml/手工吹制',
        'num':'10',
        'price':'189'
    },{
        'tp':'./Snipaste_2025-01-27_18-54-48.png',
        'tag':'共享品茶乐趣公道闻香手工吹制',
        'gg':'规格：公道杯230ml/手工吹制',
        'num':'10',
        'price':'189'
    },{
        'tp':'./Snipaste_2025-01-27_18-54-48.png',
        'tag':'共享品茶乐趣公道闻香手工吹制',
        'gg':'规格：公道杯230ml/手工吹制',
        'num':'10',
        'price':'189'
    },{
        'tp':'./Snipaste_2025-01-27_18-54-48.png',
        'tag':'共享品茶乐趣公道闻香手工吹制',
        'gg':'规格：公道杯230ml/手工吹制',
        'num':'10',
        'price':'189'
    },{
        'tp':'./Snipaste_2025-01-27_18-54-48.png',
        'tag':'共享品茶乐趣公道闻香手工吹制',
        'gg':'规格：公道杯230ml/手工吹制',
        'num':'10',
        'price':'189'
    },]
    function set(arr){
        localStorage.setItem('data',JSON.stringify(arr))
    }
    function get(){
        var sj= localStorage.getItem('data')
        if(sj!=null){
            return JSON.parse(sj)
        }else{
            return []
        }
    }
    set(data)
    function xr(){
        tbody.innerText=''
        //渲染
        for(i=0;i<data.length;i++){
            //创建
            var tr=document.createElement('tr')
            //赋值
            tr.innerHTML=`
                <td>${b++}</td>
                <td><img src="${data[i].tp}" style="width: 60px;height: 60px;"><p style="font-size: 11px;">${data[i].tag}</p>
                <p style="font-size: 10px; color: #a6a6a6;">${data[i].gg}</p></td>
                <td>￥${data[i].price}</td>
                <td>${data[i].num}</td>
                <td>￥${(data[i].price*data[i].num).toFixed(2)}</td>
                <td><button style="border: 0; color: green;" onclick="del(${i})">删除</button></td>
            `
            //添加
            tbody.appendChild(tr)
            sum+=data[i].num/1
            s1.innerHTML=sum
            prices+=(data[i].price*data[i].num).toFixed(2)/1
            s2.innerHTML='￥'+prices
        }
    }
    
    function del(a){
        //先获取数据
        var shuju=get();
        //操作数据（删除）
        shuju.splice(a,1)
        set(shuju)
        xr()
    }
    xr()
</script>